<template>
  <div>
    <h1 @click="say">孙子组件</h1>
  <h1>页面中使用state的数据：{{$store.state.count}}</h1>
    <h1>{{ydata}}</h1>
    <h1>{{tkdata}}</h1>
    <hr>
    <h1>辅助函数注入到本组件的state和getters</h1>
    <h1>{{count}}</h1>
    <h1>{{ccCount}}</h1>
    <h1>{{token}}</h1>
    <h1>分模块state：{{myname}}</h1>
    <h1>分模块getters：{{mylist}}</h1>
    <button @click="setCount(100)">mutations改变</button>
    <button @click="countAct(200)">action改变</button>
    <button @click="setmy">改变分模块</button>
    <button @click="nameAct('猪八戒')">改变分模块的名字 actions</button>
    <hr>
  </div>
</template>

<script>
// vuex 提供四个辅助函数 
  // mapState mapGetters 方便将vuex的state数据和getter数据注入到本组件的计算属性使用
  // mapMutations 和mapActions 方便将vuex的mutations和actions的方法注入本组件 methods 方便使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: '2209vueVuexSun',
  inject:["ydata","tkdata"],  //接受组件组件传来的数据
  data() {
    return {
      
    };
  },
  computed:{ //辅助函数 将vuex的state 和getters 快速注入到本组件的计算属性
    ...mapState(['count','token']),
    ...mapState("cartStore",['myname']), //分模块state
    ...mapGetters("cartStore",['mylist']),//分模块getters
    ...mapGetters(['douBleCount','ccCount'])
  },
  mounted() {
    
  },

  methods: {
    // 使用mapMutations和mapActions 辅助函数 注入进入本组件
    // 直接this.方法调用
    ...mapMutations(["setCount"]),
    ...mapActions(["countAct"]),
    ...mapMutations("cartStore",["setName"]),
    ...mapActions("cartStore",["nameAct"]),
    say(){
      // 注入到本组件的计算属性后 直接this.属性调用
      console.log(this.ccCount)
    },
    setmy(){
      this.setName("孙悟空")
    }
    
  },
};
</script>

